import { CaseConfigType } from '@shared';
import { BasicComponent } from './basic/basic.component';
import { CustomComponent } from './custom/custom.component';
import { CollapseComponent } from './collapse/collapse.component';
import { ThemeComponent } from './theme/theme.component';
import { AccordionComponent } from './accordion/accordion.component';

export const MenuConfig: CaseConfigType = {
  location: 'Menu',
  description: '导航菜单用于为系统的各个层级的界面提供跳转指引。',
  description_en: 'The navigation menu is used to provide jump guidance for interfaces at all levels of the system.',
  component: [
    {
      demo: BasicComponent,
      codePath: 'showcase/menu/basic/basic.component',
      demoTitle: '左侧菜单',
      demoTitle_en: 'Left-side Menu',
      demoDescription: '一般用于产品左侧导航菜单，有2套风格，支持横向收起(配合Layout使用，参见Layout组件Demo)，当前选中项配置。',
      demoDescription_en:
        'Generally used for the left-side navigation menu of the product, which has two patterns. It supports horizontal collapse (used with Layout, see Demo of component Layout). ',
    },
    {
      demo: AccordionComponent,
      codePath: 'showcase/menu/accordion/accordion.component',
      demoTitle: '手风琴',
      demoTitle_en: 'Accordion',
      demoDescription: '',
      demoDescription_en: '',
    },
    {
      demo: ThemeComponent,
      codePath: 'showcase/menu/theme/theme.component',
      demoTitle: '主题',
      demoTitle_en: 'Theme',
      demoDescription: '',
      demoDescription_en: '',
      devDebug: true,
    },
    {
      demo: CustomComponent,
      codePath: 'showcase/menu/custom/custom.component',
      demoTitle: '菜单项自定义',
      demoTitle_en: 'MenuItem Customization',
      demoDescription: '可以进行全局的自定义，也可以对单个菜单项进行自定义。',
      demoDescription_en: 'It is valid to customise globally or customise for single menu item.',
      devDebug: true,
    },
  ],
  selector: 'lv-menu',
  snippet: `<lv-menu [lvMenus]="\${1:menus}" [lvActiveItemId]="\${2:active}"></lv-menu>`,
  api: [
    {
      attribute: 'lvMenus',
      type: 'MenuItem[]',
      default: 'null',
      description: `菜单定义，类型为MenuItem数组，MenuItem 属性如下：
      <ul>
        <li>[id: string] 菜单项ID，具有唯一性 (必选)</li>
        <li>[label: string | TemplateRef] 菜单项显示的名称 (必选)</li>
        <li>[tips: string] 鼠标滑过时，显示的提示信息 (可选)</li>
        <li>[icon: string] 菜单项的图标 (可选)</li>
        <li>[onClick: void] 菜单项的左键单击事件的回调函数，(event) => {} (可选)</li>
        <li>[routerLink: LvRouterLinkType] 路由配置，菜单项左键单击触发，如 '/a'、['/a']、[['/a'], {queryParams: {id: 1}}] (可选)</li>
        <li>[items: MenuItem[]] 菜单项的子菜单定义 (可选)</li>
        <li>[expanded: boolean] 菜单项是否展开，默认值 false (可选)</li>
        <li>[disabled: boolean] 菜单项是否禁用，默认值 false (可选)</li>
        <li>[hidden: boolean] 菜单项是否隐藏，默认值 false (可选)</li>
        <li>[type: string] 需要menu group显示时配置成group (可选)</li>
      </ul>
      `,
      description_en: `Definition of menu, the type of which is MenuItem array. The MenuItem properties are as follows:
			<ul>
			  <li>[id: string] Menu item ID, unique (required)</li>
			  <li>[label: string | TemplateRef] Name displayed by menu item (required)</li>
			  <li>[tips: string] Prompt information displayed when mouse is over (optional)</li>
			  <li>[icon: string] Icon of menu item (optional)</li>
			  <li>[onClick: void] Callback function of the click event of the menu item, (event) = > {} (optional)</li>
        <li>[routerLink: LvRouterLinkType] Route configuration, triggered by left-click on the menu item (optional), exp：'/a'、['/a']、['/a', {queryParams: {id: 1}}]</li>
			  <li>[items: MenuItem[]] Submenu definition of menu item (optional)</li>
			  <li>[expanded: boolean] Whether to expand the menu item, which is false by default (optional)</li>
			  <li>[disabled: boolean] Whether to disable the menu item, which is false by default (optional)</li>
			  <li>[hidden: boolean] Whether to hide the menu item, which is false by default (optional)</li>
        <li>[type: string] When the menu group needs to be displayed, configure it as group (optional)</li>
			</ul>
			`,
    },
    {
      attribute: 'lvLabelTemplate',
      type: 'TemplateRef',
      default: 'null',
      description: `菜单项的 label 自定义模板，该模板对所有菜单项有效。`,
      description_en: `Custom label template of the menu item, which is valid to all menu items.`,
    },
    {
      attribute: 'lvTitle',
      type: 'string | Template',
      default: 'null',
      description: '菜单标题配置，标题未配置或为空时，标题不显示；默认值为空。',
      description_en:
        'Configuration of menu title. If the title is not configured or empty, the title will not be displayed. The value is empty by default.',
    },
    {
      attribute: 'lvTheme',
      type: 'string',
      default: 'dark',
      description: `菜单主题风格配置，支持浅色、深色两种主题 ('light' | 'dark')，默认为深色风格。`,
      description_en: `The menu theme style configuration supports light and dark themes ('Light '|' dark '). The default is dark. `,
    },
    {
      attribute: 'lvMultiExpansion',
      type: 'boolean',
      default: 'false',
      description: `菜单项是否支持多个展开，默认只展开一个。`,
      description_en: `Whether the menu item supports multi-expansion, which is set to expand singly by default. `,
    },
    {
      attribute: 'lvCollapsed',
      type: 'boolean',
      default: 'false',
      description: `配置菜单横向初始是否折叠，默认为不折叠。`,
      description_en: `Whether the configured menu is collapsed horizontally initially, which is set to be expanded by default. `,
    },
    {
      attribute: 'lvActiveItemId',
      type: 'string',
      default: 'null',
      description: `配置菜单初始选中项，可双向绑定。`,
      description_en: `Initially checked item of the configuration menu, which supports two-way binding.`,
    },
    {
      attribute: 'lvItemClickClose',
      type: 'boolean',
      default: 'true',
      description: `在纵向菜单折叠状态和横向菜单场景下，点击菜单项时是否自动关闭菜单弹层。`,
      description_en: `In the 'vertical' direction menu that is collapsed and 'horizontal' direction menu scene, whether to automatically close the menu pop-up layer when clicking the menu item.`,
    },
  ],
  event: [
    {
      event: 'lvItemClick',
      parameter: `event`,
      description: '菜单项的左键单击事件的回调函数，(event) => {} 。',
      description_en: 'Callback function of the click event of the menu item, (event) = > {}.',
    },
    {
      event: 'lvMenusChange',
      parameter: `MenuItem[]`,
      description: '菜单项的变更的回调函数。',
      description_en: 'Callback function for menu item change.',
    },
  ],
};
